import React from "react";
import Chart from "echarts-for-react";
import PublicService from '../../../services/PublicService';
import request from '../../../utils/request';
import echarts from 'echarts'
import { Radio } from 'antd';
const RadioGroup = Radio.Group;
class RightTop extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            disList: {},
            value:1
        }

    }


    componentDidMount() {
        this.onsave()
    }
    onsave = () => {
      
        request({
            url: `/zhrq-web/cockpit/common/getXielouAlarm?type=1`,
            method: 'GET',
           
        }).then(data => {
            // console.log(data)
            if (data.rc === 0) {
                this.setState({
                    disList: data.ret
                })
            }
        })
    }

    onChange = (e) => {
        request({
            url: `/zhrq-web/cockpit/common/getXielouAlarm?type=${e.target.value}`,
            method: 'GET',
           
        }).then(data => {
            // console.log(data)
            if (data.rc === 0) {
                this.setState({
                    disList: data.ret,
                    value: e.target.value,
                })
            }
        })
    }

    setOption = () => {
        let data = this.state.disList
        return {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#57617B'
                    }
                }
            },
            grid: {
                top: '36%',
                left: '7%',
                right: '2%',
                bottom: '0%',
                containLabel: true
            },

            xAxis: [{
                type: 'category',
                boundaryGap:false,
                axisLine: {
                    lineStyle: {
                        color: '#70D7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 10
                },
                axisTick: {
                    show: false,
                },
                data: data.time,
            }],
            yAxis: [{
                type: 'value',
     
                splitNumber:5,
              
                name: "报警数量（次）",
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 10
                },
                axisLine: {
                    lineStyle: {
                        color: '#70D7FF'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 10
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#70D7FF'
                    }
                },
                axisTick: {
                    show: false,
                },
            }],
            series: [{
             
                type: 'line',
                name:"数量",
                // smooth: true, //是否平滑曲线显示
                // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                showAllSymbol: true,

                symbol: 'none',//折线拐点去掉圆点

                lineStyle: {
                    normal: {
                        color: "#70D7FF", // 线条颜色
                    },
                    borderColor: '#f0f'
                },
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#fff',
                    }
                },

                itemStyle: {
                    normal: {
                        color: "#28ffb3",
                        label: { show: false }
                    }
                },

                areaStyle: { //区域填充样式
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#70D7FF'
                        },
                        {
                            offset: 1,
                            color: 'rgba(0,0,0, 0)'
                        }
                        ], false),
                        shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
                        shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    }
                },
                data: data.yAxis
            }]
        };



    }

    render() {

        return (
            <div style={{ height: "80%", float: "left", width: "50%" }}>
            <div style={{position: 'absolute', right: '20px'}}>
                <RadioGroup onChange={this.onChange} value={this.state.value}>
                    <Radio value={1}><span style={{color:'#fff',fontSize:10}}>一周</span></Radio>
                    <Radio value={2}><span style={{color:'#fff',fontSize:10}}>一个月</span></Radio>
                    <Radio value={3}><span style={{color:'#fff',fontSize:10}}>三个月</span></Radio>
                </RadioGroup>
            </div>
            <Chart option={this.setOption()} notMerge lazyUpdate style={{ height: "97%" }}
                echartsInstance={this.save}
            />
        </div>

           




        );
    }

}

export default RightTop;
